<template>
  <view>
    <view class="cm-text-14" :style="[templateStyle]" v-if="isLoaded">
      <!-- 起局信息显示部分 -->
      <cm-label-text label="公历时间" label-width="80" border-split border-bottom>{{ solarTimeText }}</cm-label-text>
      <cm-label-text label="农历时间" label-width="80" border-split>{{ lunarTimeText }}</cm-label-text>
      <cm-sticky cm-class="app-card-bg-color_bg" :top="CustomBar">
        <!-- 山向信息显示 -->
        <cm-label-text v-if="options.type === 'posDunjia'"
          label="初始山向" label-width="80" border-split border-top border-bottom><text space="nbsp">{{ startMountainText }}</text></cm-label-text>
        <cm-label-text v-if="options.type === 'posDunjia'"
          label="当前山向" label-width="80" border-split border-bottom><text space="nbsp">{{ mountainText }}</text></cm-label-text>
        <!-- 时局四柱显示 -->
        <cm-label-text v-if="options.type === 'timeDunjia'"
          label="时间干支" label-width="50" border-top border-bottom border-split>
          <view class="cm-flex cm-text-center">
            <view class="cm-flex cm-flex-col cm-flex-g-1"
              v-for="(count, index) in ganzhiLimit" :key="index">
              <bagua-element ele-class="cm-bold" :bagua="dunjia.date.ganzhi[index].gan"
                :season="seasonIndex" :compare-selected="compareSelected"
                @click="elementClickHandler(dunjia.date.ganzhi[index].gan)"></bagua-element>
              <bagua-element ele-class="cm-bold" cm-class="cm-margin-top-10" :bagua="dunjia.date.ganzhi[index].zhi"
                :season="seasonIndex" :compare-selected="compareSelected"
                @click="elementClickHandler(dunjia.date.ganzhi[index].zhi)"></bagua-element>
              <view class="cm-margin-top-10">
                <text v-if="index < dunjia.countList.length">{{ dunjia.countList[index] }}</text>
                <text v-else>0</text>              
              </view>
            </view>
          </view>
        </cm-label-text>
        <!-- 山向局时柱显示 -->
        <view class="cm-flex" v-else>
          <view class="cm-w-60 app-border-color_ex-right">
            <cm-label-text label="时间干支" label-width="50" border-split border-bottom>
              <view class="cm-flex cm-text-center">
                <view class="cm-flex cm-flex-col cm-flex-g-1"
                  v-for="(count, index) in ganzhiLimit" :key="index">
                  <bagua-element ele-class="cm-bold" :bagua="dunjia.date.ganzhi[index].gan"
                    :season="seasonIndex" :compare-selected="compareSelected"
                    @click="elementClickHandler(dunjia.date.ganzhi[index].gan)"></bagua-element>
                  <bagua-element ele-class="cm-bold" cm-class="cm-margin-top-10" :bagua="dunjia.date.ganzhi[index].zhi"
                    :season="seasonIndex" :compare-selected="compareSelected"
                    @click="elementClickHandler(dunjia.date.ganzhi[index].zhi)"></bagua-element>
                </view>
              </view>
            </cm-label-text>
          </view>
          <view class="cm-w-40">
            <cm-label-text label="定局干支" label-width="50" border-split border-bottom>
              <view class="cm-flex cm-text-center">
                <view class="cm-flex cm-flex-col cm-flex-g-1"
                  v-for="(item, index) in dunjia.keyGanzhiGroup" :key="index">
                  <bagua-element ele-class="cm-bold" :bagua="item.gan"
                    :season="seasonIndex" :compare-selected="compareSelected"
                    @click="elementClickHandler(item.gan)"></bagua-element>
                  <bagua-element ele-class="cm-bold" cm-class="cm-margin-top-10" :bagua="item.zhi"
                    :season="seasonIndex" :compare-selected="compareSelected"
                    @click="elementClickHandler(item.zhi)"></bagua-element>
                </view>
              </view>
            </cm-label-text>
          </view>
        </view>        
      </cm-sticky>

      
      <!-- 遁甲起局基本信息 -->
      <view class="cm-flex">
        <view class="cm-w-60 app-border-color_ex-right">
          <cm-label-text label="旬首" label-width="50" border-split border-bottom>{{ dunjia.xunHead.name }}</cm-label-text>
        </view>
        <view class="cm-w-40">
          <cm-label-text label="局数" label-width="50" border-split border-bottom>{{ dunjiaNumText }}</cm-label-text>
        </view>
      </view>
      <view class="cm-flex">
        <view class="cm-w-60 app-border-color_ex-right">
          <cm-label-text label="值符" label-width="50" border-split border-bottom>
            <bagua-element :bagua="dunjia.headStarDoor.star" wuxing></bagua-element>
          </cm-label-text>
        </view>
        <view class="cm-w-40">
          <cm-label-text label="值使" label-width="50" border-split border-bottom>
            <bagua-element :bagua="dunjia.headStarDoor.door" wuxing></bagua-element>
          </cm-label-text>
        </view>
      </view>
      <!-- 额外信息 -->
      <view style="min-height: 44px;" class="cm-flex cm-flex-a-center cm-flex-j-center cm-padding-10 app-border-color_ex-bottom">
        <view v-if="dunjiaExtraInfo.length === 0">无</view>
        <view v-else class="cm-flex cm-flex-a-center cm-flex-wrap">
          <view class="cm-flex cm-flex-a-center cm-margin-right-15" v-for="(item, index) in dunjiaExtraInfo" :key="index">
            <text>{{ item.text }}</text>
            <bagua-element v-if="item.bagua && !Array.isArray(item.bagua)" cm-class="cm-margin-left-5" :bagua="item.bagua" yinyang wuxing></bagua-element>
            <view v-else-if="item.bagua && Array.isArray(item.bagua)">
              <bagua-element v-for="(baguaItem, baguaIndex) in item.bagua" :key="baguaItem.id"
                cm-class="cm-margin-left-5" :bagua="baguaItem" yinyang wuxing></bagua-element>              
            </view>
          </view>            
        </view>
      </view>
      
      <!-- 遁甲局的位置 -->
      <dunjia-content ref="dunjiaContent" :setting="toolSetting"
        @change="dunjiaChangeHandler"
        @special="dunjiaSpecialHandler"
        @finish="dunjiaFinishedHandler"></dunjia-content>
      
      
      <!-- 太乙附加信息，目前只有时局可以穿太乙 -->
      <view v-if="options.type === 'timeDunjia'">
        <view class="app-border-color_ex-top">
          <cm-switch v-model="isTaiyiShow" label-width="200" label="显示太乙信息" :disabled="taiyiDisabled"
            @change="taiyiShowHandler" @click="taiyiShowClickHandler"></cm-switch>
        </view>
        <view class="cm-flex cm-text-center app-border-color_ex-top">
          <view class="cm-w-40 cm-padding-10 app-border-color_ex-right">太乙积数</view>
          <view class="cm-w-30 cm-padding-10 app-border-color_ex-right">主算</view>
          <view class="cm-w-30 cm-padding-10">客算</view>
        </view>
        <view class="cm-flex cm-text-center app-border-color_ex-top">
          <view class="cm-w-40 cm-padding-10 app-border-color_ex-right">{{ dunjia.taiyiNum ? dunjia.taiyiNum : 0 }}</view>
          <view class="cm-w-30 cm-padding-10 app-border-color_ex-right">{{ dunjia.taiyiMainNum ? dunjia.taiyiMainNum : 0 }}</view>
          <view class="cm-w-30 cm-padding-10">{{ dunjia.taiyiSubNum ? dunjia.taiyiSubNum : 0 }}</view>
        </view>
        <cm-label-text :cm-style="{ minHeight: '44px' }" label="太乙" label-width="80" border-split border-top>
          <view class="cm-text-center" v-if="!isTaiyiActivated">无</view>
          <view class="cm-flex cm-flex-a-center cm-flex-j-center" v-else>
            <text>位置：</text>
            <bagua-element :bagua="dunjia.taiyiPalaces[dunjia.taiyiPos].ele.taiyiGround" yinyang wuxing sim-name></bagua-element>
            <text class="cm-margin-left-10">入宫：</text>
            <text class="app-alert-color">{{ dunjia.taiyiPalaces[dunjia.taiyiPos].ele.taiyiSky[0].yearNum }}年</text>
          </view>
        </cm-label-text>             
      </view>

    </view>
    
    <!-- 底部工具栏 -->
    <bagua-tool ref="baguaTool" :options="toolOptions" @change="toolChangeHandler"></bagua-tool>
    <!-- 载入 -->
    <cm-loading @loading="init"></cm-loading>
    
    
  </view>
</template>

<script src="./dunjiaTemplate.js"></script>

<style lang="stylus">
@import './dunjiaTemplate.styl'
</style>
